<template>
	<view class="swiper">
		<swiper circular @change="change" :style="{ width: width, height: height }" :indicator-dots="true" :autoplay="true"
			:interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<view class="swiper-item">
					<image :src="item" :style="{ width: width, height: height }"></image>
				</view>
			</swiper-item>
		</swiper>
		<text class="right-bottom">
			{{ current + 1 }}/{{ swiperList.length }}
		</text>
	</view>
</template>

<script>
	export default {
		name: "my-swiper",
		data() {
			return {
				current: 0
			};
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			}
		},
		props: {
			swiperList: {
				type: Array,
				default: []
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '200px'
			}
		}
	}
</script>

<style lang="scss" scoped>
.swiper {
	position: relative;
	.right-bottom {
		position: absolute;
		right: 2px;
		bottom: 2px;
		background-color: rgba(0, 0, 0, .6);
		color: white;
	}
}
</style>